@import url("iconfonts.css");
@import url("font-noodle.css");

/* variables */
@theme-color: #05b9ff;
@card-bg-color: #e5e5e5;
@error-color: #ff3d01;

@black87: rgba(0,0,0,.87);
@black54: rgba(0,0,0,.53);
@black26: rgba(0,0,0,.26);
@black10: rgba(0,0,0,.1);

@white87: rgba(255,255,255,.87);
@white54: rgba(255,255,255,.53);
@white26: rgba(255,255,255,.26);
@white10: rgba(255,255,255,.1);

/* reset style */
html {
	height: 100%;
	width: 100%;
	font-size: 16px;
}
body {
	position: relative;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	color: @black87;
	background-color: #f2f2f2;
	-webkit-tap-highlight-color: rgba(0,0,0,0);//设置点击链接时出现的高亮颜色
}

body,
article, aside, footer, header, nav, section,
h1, h2, h3, h4, h5, h6,
select, input, textarea, button,
ul, ol, dl, dt, dd, li,
table, legend, thead, tbody, tfoot, tr, td, th,
div, p, span, a {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: helvetica, "Microsoft YaHei", sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	font-size: .875rem;//14px
}
ul, ol, li {
	list-style: none;
}
a {
	text-decoration: none;
	-webkit-touch-callout: none;//禁用长按链接时出现的提示
	color: @black87;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button, input:focus, select:focus, textarea:focus {
	outline: none;
}

/* global style 全局可用样式*/
.u(@x: 2rem) {
	height: @x;
	line-height: @x;
}
.q(@x: 2rem) {
	height: @x;
	width: @x;
	line-height: @x;
	text-align: center;
}

// vertical align
.valign{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.valign-left(@left: 0){
	position: absolute;
	top: 50%;
	left: @left;
	transform: translateY(-50%);
}
.valign-right(@right: 0){
	position: absolute;
	top: 50%;
	right: @right;
	transform: translateY(-50%);
}

/* page style 页面框架*/
article {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #f2f2f2;
	& > header {
		position: relative;
		height: 2.75rem;
		width: 100%;
		padding: 0 3.5rem;
		z-index: 2;
		h1 {
			.u(2.75rem);
			font-size: 1.125rem;
			text-align: center;
			color: @theme-color;
		}
		.icon-add {
			.valign-right(1rem);
			font-size: 1.375rem;
		}
	}
	& > section {
		position: relative;
		flex: 1;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
}
/*下拉列表*/
.drop-down {
	.valign-left(1rem);
	padding-right: 1.375rem;
	&:after {
		.valign-right(0);
		content: "\e900";
		font-family: 'icomoon';
		font-size: .875rem;
		transition: all .2s;
	}
	span {
		.u(2.75rem);
		font-size: .9375rem;
	}
	ul {
		position: absolute;
		top: 100%;
		left: 0;
		box-shadow: 1px 1px 4px rgba(0,0,0,.20);
		background-color: #fff;
		display: none;
		li {
			.u(2rem);
			padding: 0 1rem;
			border-bottom: 1px solid #e5e5e5;
			text-align: left;
			font-size: .9375rem;
			white-space: nowrap;
			transition: all .2s;
			&:active, &.active {
				background-color: @theme-color;
				color: @white87;
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
	&.on {
		&:after {
			content: "\e905";
		}
		ul {
			display: block;
		}
	}
}

/*统计总数*/
.data {
	position: relative;
	padding: .75rem;
	margin: .5rem 1rem;
	height: 5.5rem;
	background-color: @card-bg-color;
	border-radius: 8px;
	text-align: center;
	.sum {
		font-family: 'noodle';
		color: @theme-color;
		font-size: 2.25rem;
		.postfix {
			font-family: 'noodle';
			font-size: .9375rem;
			margin-left: .25rem;
		}
	}
	.time {
		font-size: .75rem;
		margin-top: .5rem;
	}
	.icon-button {
		position: absolute;
		top: .75rem;
		right: .75rem;
		color: @theme-color;
		&:before {
			font-family: 'icomoon';
			font-size: 1.875rem;
		}
		&.money:before {
			content: "\e903";
		}
		&.degree:before {
			content: "\e901";
		}
	}
}

/*图表区*/
.chart-container {
	margin: .5rem 1rem;
}

/*电表列表*/
.ammeter-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 .5rem;
	li {
		position: relative;
		flex: 1;
		min-height: 5.5rem;
		padding: 1rem;
		margin: .5rem;
		border-radius: 8px;
		background-color: @card-bg-color;
		&.abnormal {
			.sum {
				color: @black54;
				.postfix {
					display: none;
				}
			}
			.status {
				background-color: @error-color;
				color: @white87;
			}
		}
	}
	.sum {
		font-family: 'noodle';
		color: @theme-color;
		font-size: 1.5rem;
		.postfix {
			font-family: 'noodle';
			font-size: .75rem;
			margin-left: .25rem;
		}
	}
	.status {
		position: absolute;
		top: 1rem;
		right: 0;
		font-size: .75rem;
		width: 2.5rem;
		.u(1.25rem);
		border-top-left-radius: 1.25rem;
		border-bottom-left-radius: 1.25rem;
		text-align: center;
		background-color: @theme-color;
		color: @white87;
	}
	.location {
		position: relative;
		padding-left: 1.4375rem;
		margin-top: .25rem;
		font-size: .75rem;
		.u(1rem);
		overflow: hidden;
		.icon {
			.valign-left(0);
			font-size: .9375rem;
		}
	}
	.chart {
		margin-top: .25rem;
		height: 1rem;
	}
}
